<template>
  <view>
    <view class="top" style="position: fixed">
      <view class="checked">
        <view class="selected" @click="showCheckType">
          {{ city.name ? city.name : "临沂市" }}
        </view>
        <view
          style="height: 26rpx; background-color: #f2f2f2ff; width: 1px"
        ></view>
        <view class="selected" @click="showCheckLocation">
          {{ nowRange }}
        </view>
        <view
          style="height: 26rpx; background-color: #f2f2f2ff; width: 1px"
        ></view>
      </view>
    </view>
    <view style="height: 80rpx"></view>
    <view v-if="value == 0">
      <uni-card
        class="card"
        :is-shadow="false"
        is-full
        v-for="(item, index) in zbList"
        :key="index"
        @click="supply('biddingPublicity', item)"
      >
        <uni-title :title="item.projectName"></uni-title>
        <text class="left">时间：{{ item.publishDate }}</text>
      </uni-card>
    </view>
    <view v-if="value == 1">
      <uni-card
        class="card"
        :is-shadow="false"
        is-full
        v-for="(item, index) in zbList2"
        :key="index"
        @click="supply('bidPublicity', item)"
      >
        <uni-title :title="item.projectName"></uni-title>
        <text class="left">时间：{{ item.publishDate }}</text>
      </uni-card>
    </view>
    <view v-if="value == 2">
      <uni-card
        class="card"
        :is-shadow="false"
        is-full
        v-for="(item, index) in cjList"
        :key="index"
        @click="supply('dealPublicity', item)"
      >
        <uni-title :title="item.projectName"></uni-title>
        <text class="left">时间：{{ item.publishDate }}</text>
      </uni-card>
    </view>
    <check-city
      ref="selectLocation"
      :height="'80'"
      :sheight="'614'"
      @change="checkLocation"
    ></check-city>
    <uni-popup ref="rangeSelect">
      <view
        style="
          height: 600rpx;
          background-color: white;
          width: 100%;
          border: 1px solid white;
        "
      >
        <view style="margin-top: 35px">
          <scroll-view style="height: 430rpx" scroll-y>
            <view
              v-for="(item, index) in rangeList"
              :key="index"
              style="display: flex; justify-content: center"
              @click="checkFangshi(item)"
            >
              <view
                style="
                  display: flex;
                  width: 90%;
                  justify-content: space-between;
                  height: 60rpx;
                  align-items: center;
                "
              >
                <view>{{ item }}</view>
                <uni-icons
                  type="checkmarkempty"
                  size="24"
                  v-show="nowRange == item"
                ></uni-icons>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { callForTender, bid, projectDonePublic } from "@/utils/api.js";
import checkCity from "../../components/checkCity/checkCity.vue";
export default {
  components: { checkCity },
  data() {
    return {
      title: "Hello",
      city: 0,
      value: 0,
      cityList: [
        { value: 0, text: "临沂市" },
        { value: 1, text: "罗庄区" },
        { value: 2, text: "河东区" },
        { value: 3, text: "兰山区" },
      ],
      rangeList: ["招标公示", "中标公示", "成交公示"],
      zbList: [], //招标
      zbList2: [], //中标
      cjList: [], //成交
      city: uni.getStorageSync("nowCity"),
      nowRange: "招标公示",
      nowPage: 0,
    };
  },
  onLoad(e) {
    this.getPage(true);
  },
  onReachBottom() {
    this.nowPage++;
    this.getPage(false);
  },
  methods: {
    checkFangshi(e) {
      this.nowRange = e;
      if (e == "招标公示") {
        this.value = 0;
      } else if (e == "中标公示") {
        this.value = 1;
      } else {
        this.value = 2;
      }
      this.nowPage = 0;
      this.getPage(true);
      this.$refs.rangeSelect.close();
    },
    showCheckLocation() {
      this.$refs.rangeSelect.open("top");
    },
    checkLocation(e) {
      this.nowPage = 0;
      this.city = e;
      this.getPage(false);
    },
    showCheckType() {
      // this.$refs.selectType.close();
      this.$refs.selectLocation.open("top");
    },
    async getPage(e) {
      let res = await callForTender.getPage({
        pageNum: this.nowPage,
        pageSize: 20,
        areaId: this.city.id,
        level: this.city.level,
      });
      let res2 = await bid.getPage({
        pageNum: this.nowPage,
        pageSize: 20,
        areaId: this.city.id,
        level: this.city.level,
      });
      let res3 = await projectDonePublic.getPage({
        pageNum: this.nowPage,
        pageSize: 20,
        areaId: this.city.id,
        level: this.city.level,
      });
      console.log(res);
      if (e) {
        this.zbList = res.data.rows;
        this.zbList2 = res2.data.rows;
        this.cjList = res3.data.rows;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      } else {
        this.zbList = [...this.zbList, ...res.data.rows];
        this.zbList2 = [...this.zbList2, ...res2.data.rows];
        this.cjList = [...this.cjList, ...res3.data.rows];
      }
    },
    supply(e, a) {
      uni.navigateTo({
        url: "/pages/" + e + "/" + e + "?data=" + JSON.stringify(a),
      });
    },
    change(e) {
      console.log("e:", e);
    },
  },
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  z-index: 1000;
  background-color: white;
  box-shadow: 0px 2px 2px #e5e5e580;
  display: flex;
  flex-direction: column;
  align-items: center;

  .checked {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    .selected {
      flex: 1;
      height: 76rpx;
      font-size: 14px;
      color: #5b5b5bff;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.project-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .project-info {
    width: 92%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    .info-left {
      image {
        width: 220rpx;
        height: 300rpx;
        border-radius: 10rpx;
      }
    }
    .info-right {
      width: 470rpx;
      margin-left: 8rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .project-detail {
        font-size: 28rpx;
        color: #303030;
      }
    }
  }
}
</style>
